<template>
  <div class="detail">
    <i class="el-icon-close"
       style="float:right"
       @click="closeClick"
       v-if="show"></i>
    <div class="title">{{article.title}}</div>
    <div class="info">
      <div class="date">发布时间：{{article.createdTime}} </div>
      <div class="name">发布人：{{article.createBy || article.prot}}</div>
    </div>
    <div class="content"
         v-html="article.content"></div>
  </div>
</template>

<script>
export default {
  name: '',
  components: {},
  data() {
    return {
      article: {},
      show: true,
    }
  },

  methods: {
    closeClick() {
      this.$emit('closeClick')
    },
    getContentById(id) {
      this.$api.getContentById({ id }).then((res) => {
        this.article = res.data
        this.show = false
      })
    },
  },

  computed: {},

  mounted() {
    let id = this.$route.query.id
    if (id) {
      this.getContentById(id)
    }
  },
}
</script>
<style lang='less' scoped>
.detail {
  i:hover {
    cursor: pointer;
  }
  background: #ffffff;
  border-radius: 8px;
  padding: 0 60px;
  padding-bottom: 40px;
  .title {
    text-align: center;
    font-size: 28px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    color: #333333;
    //line-height: 18px;
    padding: 20px;
    padding-top: 60px;
  }
  .info {
    display: flex;
    font-size: 12px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #999999;
    line-height: 40px;
    margin-bottom: 20px;
    justify-content: center;
    .date {
      margin-right: 120px;
    }
  }
}
.el-icon-close {
  font-size: 20px;
  margin-top: 10px;
}
/deep/ table {
  border-top: 1px solid #000 !important;
  border-left: 1px solid #000 !important;
}
/deep/ td ,/deep/ th{
  border-bottom: 1px solid #000 !important ;
  border-right: 1px solid #000 !important;
}
</style>
